<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>68课件网</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="banner">
        <ul>
            <li class="active"><a href="/">首页</a></li>
            <li><a target="_blank" href="/sellerList"> <span>乐器机构</span> </a></li>
            <li><a target="_blank" href="/shop">乐器商城</a></li>
            <li><a target="_blank" href="/news?type=recommand">乐头条</a></li>
            <li><a target="_blank" href="/exhibition">乐器展会</a></li>
        </ul>
    </div>
    <div class="container">
        <h1>Less嵌套</h1>
        <p class="desc">
            LESS 可以让我们以嵌套的方式编写层叠样式，这样结构更加的清晰明了，并且减少了代码开发量
            <a href="http://www.yueqizhixiang.com" target="_blank">乐器之乡</a>
        </p>
        <a href="http://www.yueqizhixiang.com" target="_blank">乐器之乡12</a>

        <code>
        <pre>
            #header {    
                color: black;    
                .navigation {      
                   font-size: 12px; 
                }   
                .logo {
                      width: 300px;
                      &:hover 
                      {
                          text-decoration: none
                      }
                }
            }
        </pre>
    </code>
    </div>
    <div class="container1">
        <p class="base-style">默认的段落样式</p>
        <p class="specifal-style">特殊的样式段落</p>
        LESS 可以让我们以嵌套的方式编写层叠样式，这样结构更加的清晰明了，并且减少了代码开发量
    </div>
</body>

</html>